import { inject, observer } from 'mobx-react';
import equal from "deep-equal"
import {toJS} from "mobx"
import {WeaAlertPage,WeaErrorPage,WeaTools,WeaFormItem,WeaBrowser,WeaUpload,WeaRightMenu,WeaNewScroll,WeaSelect} from "ecCom"
import {Button,Select,Icon,Form, Input,Modal,Spin,Row,Col} from "antd";
const Option = Select.Option;
import CrmSearchGroup from '../comp/crm-show-group'
import ViewLeaveMessage from "./ViewLeaveMessage"
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
class CustomerMessage extends React.Component{
    constructor(props) {
		super(props);
        this.state={
            ascSort:true,
            relateddoc:"",
            isrefresh:0,
            rowHeight:1,
            selectedValue:"1",
            value:""
        }
	}
	
    componentDidMount() {
        const { contentStore,params={} ,location} = this.props;
        const {initDatas,getLeaveMessageRightMenu} = contentStore;
        //一些初始化请求
        let fromUrl = {}; 
        if(location && JSON.stringify(location.query)!=="{}"){
            fromUrl = location.query;  
        } 
        const newBaseParams = {...params,...fromUrl,from:"mine"};
        initDatas(newBaseParams);

    }
    shouldComponentUpdate(nextProps,nextState) {
        return true
    }
    componentWillReceiveProps(nextProps){
        const oldParams = this.props.params;
        const newParams = nextProps.params;
        if(!equal(oldParams,newParams)){
            const { contentStore,params={} ,location} = nextProps;
            const {initDatas,getLeaveMessageRightMenu} = contentStore;
            //一些初始化请求
            let fromUrl = {}; 
            if(location && JSON.stringify(location.query)!=="{}"){
                fromUrl = location.query;  
            } 
            const newBaseParams = {...params,...fromUrl,from:"mine"};
            initDatas(newBaseParams);
        }
    }
    render(){
        const {contentStore } = this.props;
        const {verified,hasRight,messageInfos, messageInfosTotal} = contentStore;
        const {rowHeight,value,isrefresh,ascSort,selectedValue} = this.state;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
        };
        if (verified && !hasRight) {
            return (<WeaAlertPage >
                    <div style={{color : '#000'}}>
                    {getLabel(2012,"对不起，您暂时没有权限！")}
                    </div>
                </WeaAlertPage>
            )
        }
        if (verified && hasRight) {
            return (
                <div className="customer-contact" >
                     <div>
                        <Row >
                            <Col span="24" style={{marginBottom:"5px"}}>
                                <Input type="textarea" value={value}  onChange={this.inputOnChange} placeholder={getLabel(84370,"请填写联系记录！")} rows={rowHeight} onFocus={()=>this.textOnFocus(4)} />
                            </Col>
                        </Row>
                        <Row className="customer-contact-header" style={{display:rowHeight == "1" ? "none":"block"}}>
                            <CrmSearchGroup needTigger={true} leftComponent={
                                <Col span="24" >
                                    <Button type="primary"  onClick={()=>this.submitContacts()}>{getLabel(615,"提交")}</Button>
                                </Col>
                            } rightComponent={getLabel(83273,"附加信息")} showGroup={false}  >
                               {this.getFormItem()}
                            </CrmSearchGroup>
                        </Row>
                        <div className="customer-contact-sort">
                            <WeaSelect 
                                value={selectedValue}   
                                options={[{key: "1", selected: true, showname:getLabel(83223,"近一月")},
                                        {key: "2", selected: false, showname: getLabel(83224,"近三月")},
                                        {key: "3", selected: false, showname: getLabel(84343,"近半年")},
                                        {key: "4", selected: false, showname: getLabel(83225,"近一年")},
                                        {key: "0", selected: false, showname: getLabel(332,"全部")}]} 
                                onChange={this.dateSelectChange.bind(this)}
                            />
                            <Spin spinning={false} />
                            <div onClick={this.sortByAsc} className="customer-contact-sort-asc" style={{ background: `url(/images/ecology9/crm/icon_sequence_${ascSort ? "":"h_"}e9.png)`}}></div>
                            <div onClick={this.sortByDesc} className="customer-contact-sort-asc" style={{ background: `url(/images/ecology9/crm/icon_reverse_${ascSort ? "h_":""}e9.png)`}}></div>
                        </div>
                    </div>
                    <div className="customer-contact-content" onClick={this.textOnBlur}>
                        <div id="viewLogs" style={{height:"100%",overflow: "auto",paddingBottom:"10px"}}>
                            <WeaNewScroll height={"100%"} children={<ViewLeaveMessage data={toJS(messageInfos)} total={messageInfosTotal} pageChange={(num)=>{contentStore.getNextLeaveMessage({pageNum:num})}} />} />
                        </div>
                    </div>
                </div>
            )
        }
        return <div></div>
    }
    textOnFocus=(h)=>{
        this.setState({
            rowHeight:h
        })
    }
    textOnBlur=()=>{
        const {value} = this.state;
        if(!value){
            this.setState({ rowHeight:1})
        }
    }
    getFormItem(){
        const {contentStore} = this.props;
        const { exchangeContent } = contentStore;
        const {isrefresh} = this.state;
        let items =[
            {label:getLabel(857,"相关文档"),title:getLabel(58,"文档"),type:37,key:"relateddoc",show:true,num:isrefresh},
        ];
        const formItemLayout = {
            labelCol: { span:5 },
            wrapperCol: { span: 14 },
        };
        let group =[];
        items.map(item=>{
            if(item.show){
                group.push(
                    <WeaFormItem
                        label={item.label}
                        { ...formItemLayout}>
                        <WeaBrowser key={item.num}  type={item.type} title={item.title} hasAdvanceSerach={true} isSingle={false} onChange ={(ids, names, datas)=>this.browserOnchange(item.key,ids, names, datas)} />
                    </WeaFormItem>
                )
            }else{
                return;
            }
        })
        return group;
    }
    browserOnchange = (type,ids, names, datas) =>{
        if(type =="relateddoc"){
            this.setState({relateddoc:ids})
        }
    }
    inputOnChange=(e)=>{
        this.setState({value:e.target.value});
    }

    dateSelectChange=(value)=>{
        const {params,contentStore} = this.props;
        const { initDatas ,customerId} = contentStore;
        const {ascSort} = this.state;
        this.setState({selectedValue:value});
        initDatas({...params,...{orderway: ascSort ? 0 : 1,customerId:customerId,datatype:value}});
    }
    sortByDesc=()=>{
        const {customerId,initDatas} = this.props.contentStore;
        const { params } = this.props;
        const {selectedValue} = this.state;
        this.setState({ascSort:true});
        initDatas({...params,customerId:customerId,orderway:0,datatype:selectedValue});
    }
     sortByAsc=()=>{
        const {customerId,initDatas} = this.props.contentStore;
        const { params } = this.props;
        const {selectedValue} = this.state;
        this.setState({ascSort:false});
        initDatas({...params,customerId:customerId,orderway:1,datatype:selectedValue});
    }
    //提交
    submitContacts = ()=>{
        const {value,relateddoc} = this.state;
        const {customerId,saveLeaveMessage} = this.props.contentStore;
        let {params } = this.props;
        if(value){
            const content= {
                customerId:customerId,
                ContactInfo:value.replace(/(^\s*)|(\s*$)/g,"").replace(/\n/g,'<br>'),
                relateddoc:relateddoc,
            };
            saveLeaveMessage(content);
             this.setState({
                ascSort:true,
                relateddoc:"",
                isrefresh:this.state.isrefresh+1,
                rowHeight:1,
                value:""
             });
        }else{
             Modal.info({
                title: getLabel(15172,"系统提示"),
                content: getLabel(84370,"请填写联系记录！"),
                okText:getLabel(33703,"确定")
            });
        }
    }
   
    
}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage msg={ props.error ? props.error : getLabel(129417,'服务器运行出错，请联系系统管理员！')} />,
    {error: ""}
)(CustomerMessage);
